<template>
    <div class="main">
      <template>
        <el-card class="hearder-card">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="工单编号">
              <el-input v-model="form.taskCode" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="工作状态">
              <el-select v-model="form.createType" placeholder="请选择">
                <el-option label="代办" value="shanghai"></el-option>
                <el-option label="取消" value="beijing"></el-option>
                <el-option label="进行" value="beijing"></el-option>
                <el-option label="完成" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </template>
      <template>
        <el-card class="body-card">
         <div class="top">
          <el-button> 新增</el-button>
         </div>
          <el-table
          v-loading="loading"
            :data="formList"
            style="width: 100%">
            <el-table-column
              label="序号"
              type="index"
              >
            </el-table-column>
            <el-table-column
              prop="taskCode"
              label="工单编号"
              >
            </el-table-column>
            <el-table-column
              prop="innerCode"
              label="设备编号">
            </el-table-column>
            <el-table-column
              prop="taskType[typeName]"
              label="工单类型"
             >
            </el-table-column>
            <el-table-column
              prop="createType"
              label="工单方式">
            </el-table-column>
            <el-table-column
              prop="taskStatusTypeEntity[statusName]"
              label="工单状态">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="运维人员">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间">
            </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="150">
                <template #default="{row}">
                  <!-- <el-button type="text" size="small" @click="detailInfo(row)">查看详情</el-button> -->
                  <el-button type="text" size="small" @click="detailInfo(row)">查看详情</el-button>

                  <el-dialog
                    title="工单详情"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                    <div class="top-picture">
                      <div class="pic-left">
                        <img src="../../assets/opareStatusLeft.png" alt="">
                      </div>
                      <span>取消</span>
                      <div class="pic-right">
                        <img src="../../assets/opareStatusRight.png" alt="">
                      </div>
                    </div>
                    <el-descriptions :column="2">
                      <el-descriptions-item label="设备编号">{{delInfo.innerCode}}</el-descriptions-item>
                      <el-descriptions-item label="创建日期">18100000000</el-descriptions-item>
                      <el-descriptions-item label="取消日期">苏州市</el-descriptions-item>
                      <el-descriptions-item label="运维人员">学校</el-descriptions-item>
                      <el-descriptions-item label="工单类型">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
                      <el-descriptions-item label="工单方式">学校</el-descriptions-item>
                      <el-descriptions-item label="取消原因">学校</el-descriptions-item>
                    </el-descriptions>
                    <span slot="footer" class="dialog-footer">
                      <el-button type="primary">重新创建</el-button>
                    </span>
                  </el-dialog>

                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              :current-page.sync="currentPage"
              :page-size.sync="pageSize"
              :page-sizes="[5,10,15,20]"
              layout="prev, pager, next,total,sizes"
              :total="total"
              :totalPage="totalPage"
              @current-change="getBussList"
              @size-cahnge="getBussList"
              >
            </el-pagination>
        </el-card>
      </template>
      <!-- <OperaForm :visible="visible"></OperaForm> -->
    </div>
</template>

<script>
import { getBussList } from '@/api/bussiness'
// import OperaForm from './components/operaForm.vue'
export default {
  name: 'OperationsApp',
  components: {
    // OperaForm
  },
  data () {
    return {
      form: {},
      formList: [],
      delInfo: {},
      total: 0,
      totalPage: 0,
      currentPage: 1,
      pageSize: 10,
      loading: false,
      dialogVisible: false

    }
  },
  created () {
    this.getBussList()
  },
  methods: {
    async getBussList () {
      try {
        this.loading = true
        const res = await getBussList()
        console.log(res)
        this.formList = res.currentPageRecords
        this.formList.forEach(ele => {
          if (ele.createType === 0) {
            ele.createType = '自动'
          } else {
            ele.createType = '手动'
          }
        })
        this.total = +res.totalCount
        this.totalPage = +res.totalPage
        this.currentPage = +res.pageIndex
        this.pageSize = +res.pageSize
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    detailInfo (val) {
      this.dialogVisible = true
      console.log(val)
      this.delInfo = val
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  background-color: #f8fafd;
}
.hearder-card{
  background-color: #fff;
  height: 64px;
  padding-left: 17px;
  margin-bottom: 20px;
}
.body-card{
  background-color: #fff;
  min-height: 673px;
  padding: 20px 15px 19px 17px;
  .top{
    height: 32px;
    button{
      background-color: #ff8e3e;
      color:#fff
    }
  }
}
.top-picture{
  display: flex;
  align-items: center;
  height: 54px;
  margin-bottom: 25px;
  background-color: hsla(0,0%,92.5%,.39);
  .pic-left{
    width: 26px;
    height: 26px;
    align-content: center;
    justify-content: center;
    margin-left: 20px;
  }
  span{
    flex:1
  }
  .pic-right{
    margin-right: 76px;
    margin-top: -17px;
    width: 88px;
    height: 28px;
  }
}
.dialog-footer{
  margin: 0 auto;
}
</style>
